<template>
  <div class="ceo-dashboard">
    <!-- 核心统计卡片 -->
    <div class="stats-grid">
      <div class="stat-card">
        <div class="stat-icon revenue">
          <i class="icon-money">¥</i>
        </div>
        <div class="stat-content">
          <h3>总销售收入</h3>
          <p class="stat-value">{{ formatCurrency(statistics.totalRevenue || 0) }}</p>
          <span class="stat-growth positive">+{{ statistics.revenueGrowth || 0 }}%</span>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon orders">
          <i class="icon-order">📋</i>
        </div>
        <div class="stat-content">
          <h3>总订单数</h3>
          <p class="stat-value">{{ statistics.totalOrders || 0 }}</p>
          <span class="stat-growth positive">+{{ statistics.orderGrowth || 0 }}%</span>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon customers">
          <i class="icon-customer">👥</i>
        </div>
        <div class="stat-content">
          <h3>总客户数</h3>
          <p class="stat-value">{{ statistics.totalCustomers || 0 }}</p>
          <span class="stat-growth positive">+{{ statistics.customerGrowth || 0 }}%</span>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon products">
          <i class="icon-product">📦</i>
        </div>
        <div class="stat-content">
          <h3>总商品数</h3>
          <p class="stat-value">{{ statistics.totalProducts || 0 }}</p>
          <span class="stat-growth positive">+{{ statistics.productGrowth || 0 }}%</span>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="charts-grid">
      <!-- 销售趋势图 -->
      <div class="chart-card">
        <div class="chart-header">
          <h3>销售趋势</h3>
          <div class="chart-controls">
            <select v-model="salesMonths" @change="loadSalesTrend">
              <option value="6">最近6个月</option>
              <option value="12">最近12个月</option>
              <option value="24">最近24个月</option>
            </select>
          </div>
        </div>
        <div class="chart-container">
          <div ref="salesChart" style="width: 100%; height: 200px;"></div>
        </div>
      </div>
      
      <!-- 采购趋势图 -->
      <div class="chart-card">
        <div class="chart-header">
          <h3>采购趋势</h3>
          <div class="chart-controls">
            <select v-model="procurementMonths" @change="loadProcurementTrend">
              <option value="6">最近6个月</option>
              <option value="12">最近12个月</option>
              <option value="24">最近24个月</option>
            </select>
          </div>
        </div>
        <div class="chart-container">
          <div ref="procurementChart" style="width: 100%; height: 200px;"></div>
        </div>
      </div>
    </div>

    <!-- 生产质量和订单分布 -->
    <div class="charts-grid">
      <!-- 生产合格率趋势 -->
      <div class="chart-card">
        <div class="chart-header">
          <h3>生产合格率趋势</h3>
          <div class="chart-controls">
            <select v-model="qualityMonths" @change="loadQualityTrend">
              <option value="6">最近6个月</option>
              <option value="12">最近12个月</option>
              <option value="24">最近24个月</option>
            </select>
          </div>
        </div>
        <div class="chart-container">
          <div ref="qualityChart" style="width: 100%; height: 200px;"></div>
        </div>
      </div>
      
      <!-- 订单分布饼图 -->
      <div class="chart-card">
        <div class="chart-header">
          <h3>订单销售额分布</h3>
        </div>
        <div class="chart-container">
          <div ref="distributionChart" style="width: 100%; height: 200px;"></div>
        </div>
      </div>
    </div>

    <!-- 最新订单和库存预警 -->
    <div class="info-grid">
      <!-- 最新订单 -->
      <div class="chart-card orders-table-card">
        <div class="chart-header">
          <h3>最新订单</h3>
          <button class="btn-refresh" @click="loadLatestOrders">刷新</button>
        </div>
        <div class="table-container">
          <table>
            <thead>
              <tr>
                <th>序号</th>
                <th>销售订单号</th>
                <th>订单状态</th>
                <th>客户名称</th>
                <th>负责销售</th>
                <th>成单时间</th>
                <th>期望发货时间</th>
                <th>订单商品数</th>
                <th>待发货数量</th>
                <th>已发货数量</th>
                <th>订单总额</th>
                <th>应收总额</th>
                <th>已收总额</th>
                <th>待收总额</th>
                <th>已退总额</th>
              </tr>
            </thead>
            <tbody>
              <tr v-if="latestOrders.length === 0">
                <td colspan="15" style="text-align: center; color: #999;">暂无订单数据</td>
              </tr>
              <tr v-for="(order, index) in latestOrders" :key="order.orderId || index">
                <td>{{ index + 1 }}</td>
                <td>{{ order.orderNumber || '-' }}</td>
                <td>
                  <span :class="getStatusClass(order.orderStatus)">{{ order.orderStatus || '-' }}</span>
                </td>
                <td>{{ order.customerName || '-' }}</td>
                <td>{{ order.salesPerson || '-' }}</td>
                <td>{{ formatDate(order.orderDate) }}</td>
                <td>{{ formatDate(order.expectedDeliveryDate) }}</td>
                <td>{{ order.productCount || 0 }}</td>
                <td>{{ order.pendingQuantity || 0 }}</td>
                <td>{{ order.shippedQuantity || 0 }}</td>
                <td>{{ formatCurrency(order.orderAmount) }}</td>
                <td>{{ formatCurrency(order.receivables) }}</td>
                <td>{{ formatCurrency(order.amountReceived) }}</td>
                <td>{{ formatCurrency(order.amountCollected) }}</td>
                <td>{{ formatCurrency(order.refundedTotal) }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      
      <!-- 库存预警 -->
      <div class="info-card">
        <div class="info-header">
          <h3>库存预警</h3>
          <span class="alert-count">{{ inventoryAlerts.alertCount || 0 }}个商品库存不足</span>
        </div>
        <div class="alert-list">
          <div v-for="alert in inventoryAlerts.alerts" :key="alert.productId" class="alert-item">
            <div class="alert-icon">⚠️</div>
            <div class="alert-content">
              <h4>{{ alert.productName }}</h4>
              <p>当前库存: {{ alert.currentStock }} | 最低库存: {{ alert.minStock }}</p>
            </div>
            <div class="alert-level" :class="alert.level">{{ alert.level }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import http from '@/api/http'
import * as echarts from 'echarts'

export default {
  name: 'CeoDashboard',
  data() {
    return {
      loading: false,
      charts: {},
      statistics: {
        totalRevenue: 0,
        totalOrders: 0,
        totalCustomers: 0,
        totalProducts: 0,
        revenueGrowth: 0,
        orderGrowth: 0,
        customerGrowth: 0,
        productGrowth: 0
      },
      salesTrend: { months: [], salesData: [] },
      procurementTrend: { months: [], procurementData: [] },
      qualityTrend: { months: [], qualityRates: [] },
      orderDistribution: [],
      latestOrders: [],
      inventoryAlerts: { alertCount: 0, alerts: [] },
      salesMonths: 12,
      procurementMonths: 12,
      qualityMonths: 12,
      charts: {}
    }
  },
  mounted() {
    this.loadAllData()
    this.$nextTick(() => {
      this.initECharts()
    })
    // 添加窗口大小变化监听
    window.addEventListener('resize', this.handleResize)
  },
  beforeUnmount() {
    // 移除窗口大小变化监听
    window.removeEventListener('resize', this.handleResize)
    // 销毁图表实例
    Object.values(this.charts).forEach(chart => {
      if (chart && typeof chart.dispose === 'function') {
        chart.dispose()
      }
    })
  },
  methods: {
    async loadAllData() {
      this.loading = true
      try {
        await Promise.all([
          this.loadStatistics(),
          this.loadSalesTrend(),
          this.loadProcurementTrend(),
          this.loadQualityTrend(),
          this.loadOrderDistribution(),
          this.loadLatestOrders(),
          this.loadInventoryAlerts()
        ])
        this.$nextTick(() => {
          this.initCharts()
        })
      } catch (error) {
        console.error('加载CEO看板数据失败:', error)
        this.$message.error('加载数据失败，请稍后重试')
      } finally {
        this.loading = false
      }
    },
    
    async loadStatistics() {
      try {
        const response = await http.get('/intelligent-workbench/dashboard/statistics')
        this.statistics = response.data.data || {}
      } catch (error) {
        console.error('加载统计数据失败:', error)
      }
    },
    
    async loadSalesTrend() {
      try {
        const response = await http.get('/intelligent-workbench/dashboard/sales-trend', {
          params: { months: this.salesMonths }
        })
        this.salesTrend = response.data.data || { months: [], salesData: [] }
        if (this.charts.salesChart) {
          this.updateSalesChart()
        }
      } catch (error) {
        console.error('加载销售趋势数据失败:', error)
      }
    },
    
    async loadProcurementTrend() {
      try {
        const response = await http.get('/intelligent-workbench/dashboard/procurement-trend', {
          params: { months: this.procurementMonths }
        })
        this.procurementTrend = response.data.data || { months: [], procurementData: [] }
        if (this.charts.procurementChart) {
          this.updateProcurementChart()
        }
      } catch (error) {
        console.error('加载采购趋势数据失败:', error)
      }
    },
    
    async loadQualityTrend() {
      try {
        const response = await http.get('/intelligent-workbench/dashboard/production-quality-trend', {
          params: { months: this.qualityMonths }
        })
        this.qualityTrend = response.data.data || { months: [], qualityRates: [] }
        if (this.charts.qualityChart) {
          this.updateQualityChart()
        }
      } catch (error) {
        console.error('加载生产合格率数据失败:', error)
      }
    },
    
    async loadOrderDistribution() {
      try {
        const response = await http.get('/intelligent-workbench/dashboard/order-distribution')
        this.orderDistribution = response.data.data || []
        if (this.charts.distributionChart) {
          this.updateDistributionChart()
        }
      } catch (error) {
        console.error('加载订单分布数据失败:', error)
      }
    },
    
    async loadLatestOrders() {
      try {
        const response = await http.get('/intelligent-workbench/dashboard/latest-orders', {
          params: { limit: 10 }
        })
        if (response.data && response.data.code === 200) {
          const responseData = response.data.data;
          this.latestOrders = responseData.data || [];
        } else {
          this.latestOrders = [];
        }
      } catch (error) {
        console.error('加载最新订单数据失败:', error)
        // 添加模拟数据用于展示
        this.latestOrders = [
          {
            orderId: 1,
            orderNumber: 'SO202401001',
            orderStatus: '已完成',
            customerName: '北京科技有限公司',
            salesPerson: '张三',
            orderDate: '2024-01-15',
            expectedDeliveryDate: '2024-01-20',
            productCount: 5,
            pendingQuantity: 0,
            shippedQuantity: 5,
            orderAmount: 15000,
            receivables: 15000,
            amountReceived: 15000,
            amountCollected: 15000,
            refundedTotal: 0
          },
          {
            orderId: 2,
            orderNumber: 'SO202401002',
            orderStatus: '进行中',
            customerName: '上海贸易公司',
            salesPerson: '李四',
            orderDate: '2024-01-16',
            expectedDeliveryDate: '2024-01-22',
            productCount: 3,
            pendingQuantity: 2,
            shippedQuantity: 1,
            orderAmount: 8500,
            receivables: 8500,
            amountReceived: 4000,
            amountCollected: 4000,
            refundedTotal: 0
          },
          {
            orderId: 3,
            orderNumber: 'SO202401003',
            orderStatus: '待处理',
            customerName: '深圳制造企业',
            salesPerson: '王五',
            orderDate: '2024-01-17',
            expectedDeliveryDate: '2024-01-25',
            productCount: 8,
            pendingQuantity: 8,
            shippedQuantity: 0,
            orderAmount: 22000,
            receivables: 22000,
            amountReceived: 0,
            amountCollected: 0,
            refundedTotal: 0
          }
        ];
      }
    },
    
    async loadInventoryAlerts() {
      try {
        const response = await http.get('/dashboard/inventory-alerts')
        this.inventoryAlerts = response.data.data || { alertCount: 0, alerts: [] }
      } catch (error) {
        console.error('加载库存预警数据失败:', error)
      }
    },
    
    initCharts() {
      this.initSalesChart()
      this.initProcurementChart()
      this.initQualityChart()
      this.initDistributionChart()
    },
    
    initSalesChart() {
      const canvas = this.$refs.salesChart
      if (!canvas) return
      
      const ctx = canvas.getContext('2d')
      this.drawLineChart(ctx, {
        labels: this.salesTrend.months || [],
        data: this.salesTrend.salesData || [],
        color: '#409EFF',
        title: '销售金额'
      })
    },
    
    initProcurementChart() {
      const canvas = this.$refs.procurementChart
      if (!canvas) return
      
      const ctx = canvas.getContext('2d')
      this.drawLineChart(ctx, {
        labels: this.procurementTrend.months || [],
        data: this.procurementTrend.procurementData || [],
        color: '#67C23A',
        title: '采购金额'
      })
    },
    
    initQualityChart() {
      const canvas = this.$refs.qualityChart
      if (!canvas) return
      
      const ctx = canvas.getContext('2d')
      this.drawLineChart(ctx, {
        labels: this.qualityTrend.months || [],
        data: this.qualityTrend.qualityRates || [],
        color: '#E6A23C',
        title: '合格率(%)',
        isPercentage: true
      })
    },
    
    initDistributionChart() {
      const canvas = this.$refs.distributionChart
      if (!canvas) return
      
      const ctx = canvas.getContext('2d')
      this.drawPieChart(ctx, this.orderDistribution)
    },
    
    drawLineChart(ctx, options) {
      const { labels, data, color, title, isPercentage = false } = options
      const canvas = ctx.canvas
      const width = canvas.width
      const height = canvas.height
      const padding = 40
      
      ctx.clearRect(0, 0, width, height)
      
      if (!data || data.length === 0) {
        ctx.fillStyle = '#999'
        ctx.font = '14px Arial'
        ctx.textAlign = 'center'
        ctx.fillText('暂无数据', width / 2, height / 2)
        return
      }
      
      const chartWidth = width - padding * 2
      const chartHeight = height - padding * 2
      
      const maxValue = Math.max(...data)
      const minValue = Math.min(...data)
      const valueRange = maxValue - minValue || 1
      
      // 绘制坐标轴
      ctx.strokeStyle = '#E4E7ED'
      ctx.lineWidth = 1
      ctx.beginPath()
      ctx.moveTo(padding, padding)
      ctx.lineTo(padding, height - padding)
      ctx.lineTo(width - padding, height - padding)
      ctx.stroke()
      
      // 绘制数据线
      if (data.length > 1) {
        ctx.strokeStyle = color
        ctx.lineWidth = 2
        ctx.beginPath()
        
        data.forEach((value, index) => {
          const x = padding + (index / (data.length - 1)) * chartWidth
          const y = height - padding - ((value - minValue) / valueRange) * chartHeight
          
          if (index === 0) {
            ctx.moveTo(x, y)
          } else {
            ctx.lineTo(x, y)
          }
        })
        
        ctx.stroke()
        
        // 绘制数据点
        ctx.fillStyle = color
        data.forEach((value, index) => {
          const x = padding + (index / (data.length - 1)) * chartWidth
          const y = height - padding - ((value - minValue) / valueRange) * chartHeight
          
          ctx.beginPath()
          ctx.arc(x, y, 3, 0, 2 * Math.PI)
          ctx.fill()
        })
      }
      
      // 绘制标签
      ctx.fillStyle = '#606266'
      ctx.font = '12px Arial'
      ctx.textAlign = 'center'
      
      labels.forEach((label, index) => {
        if (index % Math.ceil(labels.length / 6) === 0) {
          const x = padding + (index / (data.length - 1)) * chartWidth
          ctx.fillText(label, x, height - 10)
        }
      })
    },
    
    drawPieChart(ctx, data) {
      const canvas = ctx.canvas
      const width = canvas.width
      const height = canvas.height
      const centerX = width / 2
      const centerY = height / 2
      const radius = Math.min(width, height) / 3
      
      ctx.clearRect(0, 0, width, height)
      
      if (!data || data.length === 0) {
        ctx.fillStyle = '#999'
        ctx.font = '14px Arial'
        ctx.textAlign = 'center'
        ctx.fillText('暂无数据', centerX, centerY)
        return
      }
      
      const total = data.reduce((sum, item) => sum + (item.amount || 0), 0)
      const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399', '#C0C4CC']
      
      let currentAngle = -Math.PI / 2
      
      data.forEach((item, index) => {
        const percentage = (item.amount || 0) / total
        const sliceAngle = percentage * 2 * Math.PI
        
        // 绘制扇形
        ctx.fillStyle = colors[index % colors.length]
        ctx.beginPath()
        ctx.moveTo(centerX, centerY)
        ctx.arc(centerX, centerY, radius, currentAngle, currentAngle + sliceAngle)
        ctx.closePath()
        ctx.fill()
        
        // 绘制标签
        const labelAngle = currentAngle + sliceAngle / 2
        const labelX = centerX + Math.cos(labelAngle) * (radius + 20)
        const labelY = centerY + Math.sin(labelAngle) * (radius + 20)
        
        ctx.fillStyle = '#606266'
        ctx.font = '12px Arial'
        ctx.textAlign = 'center'
        ctx.fillText(`${item.category || ''}`, labelX, labelY)
        ctx.fillText(`${(percentage * 100).toFixed(1)}%`, labelX, labelY + 15)
        
        currentAngle += sliceAngle
      })
    },
    
    updateSalesChart() {
      if (this.charts.salesChart) {
        const option = {
          xAxis: {
            data: this.salesTrend.months || []
          },
          series: [{
            data: this.salesTrend.salesData || []
          }]
        }
        this.charts.salesChart.setOption(option)
      }
    },
    
    updateProcurementChart() {
      if (this.charts.procurementChart) {
        const option = {
          xAxis: {
            data: this.procurementTrend.months || []
          },
          series: [{
            data: this.procurementTrend.procurementData || []
          }]
        }
        this.charts.procurementChart.setOption(option)
      }
    },
    
    updateQualityChart() {
      if (this.charts.qualityChart) {
        const option = {
          xAxis: {
            data: this.qualityTrend.months || []
          },
          series: [{
            data: this.qualityTrend.qualityRates || []
          }]
        }
        this.charts.qualityChart.setOption(option)
      }
    },
    
    updateDistributionChart() {
      if (this.charts.distributionChart) {
        const option = {
          series: [{
            data: this.orderDistribution.map(item => ({
              name: item.category,
              value: item.amount
            }))
          }]
        }
        this.charts.distributionChart.setOption(option)
      }
    },
    
    handleResize() {
      // 当窗口大小变化时，调整所有图表大小
      Object.values(this.charts).forEach(chart => {
        if (chart && typeof chart.resize === 'function') {
          chart.resize()
        }
      })
    },
    
    formatCurrency(value) {
      if (!value) return '¥0.00'
      return new Intl.NumberFormat('zh-CN', {
        style: 'currency',
        currency: 'CNY',
        minimumFractionDigits: 2
      }).format(value)
    },
    
    formatDate(dateStr) {
      if (!dateStr) return '-'
      const date = new Date(dateStr)
      return date.toLocaleDateString('zh-CN')
    },
    
    getStatusClass(status) {
      const statusMap = {
        '待处理': 'status-pending',
        '进行中': 'status-processing',
        '已完成': 'status-completed',
        '已取消': 'status-cancelled'
      }
      return statusMap[status] || 'status-default'
    },
    
    initECharts() {
      this.initEChartsSalesChart()
      this.initEChartsProcurementChart()
      this.initEChartsQualityChart()
      this.initEChartsDistributionChart()
    },
    
    initEChartsSalesChart() {
      const chartDom = this.$refs.salesChart
      if (!chartDom) return
      
      const myChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            const data = params[0]
            return `${data.name}: ¥${data.value.toLocaleString()}`
          }
        },
        xAxis: {
          type: 'category',
          data: this.salesTrend.months || [],
          axisLabel: {
            rotate: 45,
            formatter: function(value) {
              return value // 直接显示yyyy-MM格式
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '销售额',
          axisLabel: {
            formatter: function(value) {
              return '¥' + (value / 10000).toFixed(1) + 'w'
            }
          }
        },
        series: [{
          data: this.salesTrend.salesData || [],
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 6,
          itemStyle: {
            color: '#409EFF'
          },
          lineStyle: {
            width: 3
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'rgba(64, 158, 255, 0.3)'
              }, {
                offset: 1, color: 'rgba(64, 158, 255, 0.1)'
              }]
            }
          }
        }]
      }
      myChart.setOption(option)
      this.charts.salesChart = myChart
    },
    
    initEChartsProcurementChart() {
      const chartDom = this.$refs.procurementChart
      if (!chartDom) return
      
      const myChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            const data = params[0]
            return `${data.name}: ¥${data.value.toLocaleString()}`
          }
        },
        xAxis: {
          type: 'category',
          data: this.procurementTrend.months || [],
          axisLabel: {
            rotate: 45,
            formatter: function(value) {
              return value // 直接显示yyyy-MM格式
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '采购额',
          axisLabel: {
            formatter: function(value) {
              return '¥' + (value / 10000).toFixed(1) + 'w'
            }
          }
        },
        series: [{
          data: this.procurementTrend.procurementData || [],
          type: 'bar',
          itemStyle: {
            color: '#67C23A'
          },
          barWidth: '60%'
        }]
      }
      myChart.setOption(option)
      this.charts.procurementChart = myChart
    },
    
    initEChartsQualityChart() {
      const chartDom = this.$refs.qualityChart
      if (!chartDom) return
      
      const myChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            const data = params[0]
            return `${data.name}: ${data.value}%`
          }
        },
        xAxis: {
          type: 'category',
          data: this.qualityTrend.months || [],
          axisLabel: {
            rotate: 45,
            formatter: function(value) {
              return value // 直接显示yyyy-MM格式
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '合格率(%)',
          min: 0,
          max: 100,
          axisLabel: {
            formatter: function(value) {
              return value + '%'
            }
          }
        },
        series: [{
          data: this.qualityTrend.qualityRates || [],
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 6,
          itemStyle: {
            color: '#E6A23C'
          },
          lineStyle: {
            width: 3
          }
        }]
      }
      myChart.setOption(option)
      this.charts.qualityChart = myChart
    },
    
    initEChartsDistributionChart() {
      const chartDom = this.$refs.distributionChart
      if (!chartDom) return
      
      const myChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: ¥{c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [{
          name: '订单销售额',
          type: 'pie',
          radius: '50%',
          data: this.orderDistribution.map(item => ({
            name: item.category,
            value: item.amount
          })),
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      }
      myChart.setOption(option)
      this.charts.distributionChart = myChart
    }
  }
}
</script>

<style scoped>
.ceo-dashboard {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 统计卡片网格 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 15px;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.stat-icon.revenue { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.stat-icon.orders { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.stat-icon.customers { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.stat-icon.products { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }

.stat-content h3 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #909399;
  font-weight: normal;
}

.stat-value {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.stat-growth {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
}

.stat-growth.positive {
  background: #f0f9ff;
  color: #409eff;
}

.stat-growth.negative {
  background: #fef0f0;
  color: #f56c6c;
}

/* 图表网格 */
.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.chart-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-header h3 {
  margin: 0;
  font-size: 16px;
  color: #303133;
}

.chart-controls select {
  padding: 6px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background: white;
  font-size: 12px;
}

.chart-container {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-container canvas {
  max-width: 100%;
  max-height: 100%;
}

/* 信息网格 */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
}

.info-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.info-header h3 {
  margin: 0;
  font-size: 16px;
  color: #303133;
}

.btn-refresh {
  padding: 6px 12px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.btn-refresh:hover {
  background: #337ecc;
}

.alert-count {
  font-size: 12px;
  color: #f56c6c;
  background: #fef0f0;
  padding: 4px 8px;
  border-radius: 4px;
}

/* 订单表格卡片特殊样式 */
.orders-table-card {
  grid-column: 1 / -1; /* 占满整行 */
}

/* 表格样式 */
.table-container {
  max-height: 400px;
  overflow-y: auto;
  border-radius: 6px;
  border: 1px solid #ebeef5;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}

th, td {
  padding: 12px 8px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
  font-size: 12px;
}

th {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  font-weight: 600;
  color: #495057;
  position: sticky;
  top: 0;
  z-index: 10;
}

td {
  color: #606266;
  transition: background-color 0.2s ease;
}

tbody tr:hover {
  background-color: #f5f7fa;
}

tbody tr:hover td {
  color: #303133;
}

/* 状态样式 */
.status-pending {
  color: #e6a23c;
  background: #fdf6ec;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
}

.status-processing {
  color: #409eff;
  background: #ecf5ff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
}

.status-completed {
  color: #67c23a;
  background: #f0f9eb;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
}

.status-cancelled {
  color: #f56c6c;
  background: #fef0f0;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
}

/* 预警列表 */
.alert-list {
  max-height: 300px;
  overflow-y: auto;
}

.alert-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #ebeef5;
}

.alert-item:last-child {
  border-bottom: none;
}

.alert-icon {
  font-size: 20px;
}

.alert-content {
  flex: 1;
}

.alert-content h4 {
  margin: 0 0 4px 0;
  font-size: 14px;
  color: #303133;
}

.alert-content p {
  margin: 0;
  font-size: 12px;
  color: #909399;
}

.alert-level {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

.alert-level.高 {
  background: #fef0f0;
  color: #f56c6c;
}

.alert-level.中 {
  background: #fdf6ec;
  color: #e6a23c;
}

.alert-level.低 {
  background: #f0f9eb;
  color: #67c23a;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .charts-grid {
    grid-template-columns: 1fr;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .ceo-dashboard {
    padding: 10px;
  }
}
</style>